<template>
	<Row class="rowboxs">
		<Col span="24">
            <h3>生产产品名录</h3>
        </Col>
        <Col span="24" v-for="(item,index) of columns">
            <Card>
                <p slot="title" class="prtlelft"><span>{{item.title}}</span><span>生产中</span><span>日平均：11吨</span></p>
                <p>
                    <span>单耗原料：煤气、电、蒸汽、杂醇、驰放气、低压蒸汽</span>
                </p>
            </Card>
        </Col>
    </Row>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          "title": "甲醇",
          "degree": 4,
          "cls": "clr",
          "ofe": 0
        },
        {
          "title": "苯加氢",
          "degree": 3,
          "cls": "clr",
          "ofe": 1
        },
        {
          "title": "乙醇胺",
          "degree": 2,
          "cls": "mtop",
          "ofe": 0
        },
        {
          "title": "丙烯腈",
          "degree": 1,
          "cls": "mtop",
          "ofe": 1
        }
      ]
    };
  }
};
</script>
<style scoped>
  .prtlelft{
      text-align: left;
  }
  .prtlelft>span{
      display: inline-block;
      width: 30%;
  }
  .prtlelft>span:nth-of-type(1){
      color: rgb(255, 92, 42);
  }
  .rowboxs{
    padding: 20px;
    padding-top: 5px;
  }
  .yujings{
    color: red;
    font-size: 14px;
    font-weight: bold;
  }
	.mtop{
		margin-top: 20px;
	}
  .spacol{
    color: #FFAC2D;
  }
  .clr .spacol{
    color: red; 
  }
</style>